.btn {
    display:inline-block;
    background:#F6F6F6;
    margin:2px 3px 3px 3px;
    border-width:0;
    overflow:visible;
    text-decoration:none;
    color:#0073EA;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F6F6), to(#EEE));
    background:-moz-linear-gradient(0% 90% 90deg, #EEE, #F6F6F6);
    border-left:1px solid #ccc;
    border-right:1px solid #bbb;
    border-top:1px solid #ccc;
    border-bottom:1px solid #bbb;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

}
a.btn {
    padding-left:6px;
    padding-right:6px;
    color:#0073EA;
}
* html button.btn {
    padding-bottom:1px;
}
/* Immediately below is a temporary hack to serve the
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn,html:not([lang*=""]) a.btn {
    margin:0 -2px;
}

/* only needed if implementing separate hover state for buttons */
.btn:hover {
    cursor:pointer;
    border-color:#9cf !important;
    color:#FFF;
    background:#4195DD;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4195DD), to(#003C82));
    background:-moz-linear-gradient(0% 90% 90deg, #003C82, #4195DD);
}

/* use if one button should be the 'primary' button */
.primary {
    font-weight:bold;
    color:#000;
}

.btn:active {
    background:#4195DD;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#003C82), to(#4195DD));
    background:-moz-linear-gradient(0% 90% 90deg, #4195DD, #003C82);
}
.btn.notransitions {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

